<template>
  <div>
    <div class="public-common" v-if="isEdit">
        <div class="public-title" style="text-indent: 20px;;">公司动态列表</div>
        <div class="inline-btn">
          <label>创建人：</label>
          <el-input v-model="searchdata.txtPublisher"></el-input>
          <label>标题：</label>
          <el-input v-model="searchdata.txtFileName"></el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="primary" @click="addBtn">新建</el-button>
          <el-button type="warning" @click="deleteBtn">删除</el-button>
        </div>
        <div class="" style="margin:2%;">
          <el-table :data="tableData" border width="100%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label=" " fixed="left"></el-table-column>
            <el-table-column type="selection"  width="55"></el-table-column>
            <!-- <el-table-column prop="InformID"  label="编号" ></el-table-column> -->
            <el-table-column label="标题" >
               <template slot-scope="scope">
                <el-button type="text" @click="getContent(scope.row)">{{scope.row.FileName}}</el-button>
               </template>
            </el-table-column>
            <el-table-column prop="Publisher"  label="创建人" ></el-table-column>
            <el-table-column prop="PublishDate"  label="创建日期" ></el-table-column>
          </el-table>
          <el-pagination style="margin-top: 20px;"
            @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"
            :page-sizes="pagerange"  class="mt"  :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"  :total="totalnum"  ></el-pagination>
        </div>
    </div>
    <!---->
    <div class="public-common" v-if="!isEdit">
        <div class="public-title" style="text-indent: 20px;;">公司动态详细信息</div>
        <div style="margin-top: 10px;">
          <el-tabs v-model="activeName" type="card">
            <!--第一个tab页-->
            <el-tab-pane label="动态信息" name="first">
              <el-form ref="formData1" :model="formData1" style="" :rules="formRule1" label-width="100px">
              <div>
                <div class="left">
                  <div class="left-border">
                    <el-form-item label="创建人：" prop="txtPublisher">
                      <el-select v-model="formData1.txtPublisher" placeholder="请选择创建人">
                        <el-option v-for="(t,i) in usedList" :label="t.name" :key="i" :value="t.id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间：" prop="txtPublishDate">
                      <el-date-picker :disabled="true" type="datetime" v-model="formData1.txtPublishDate" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="时效性：">
                      <el-input v-model="formData1.txtExpiryHours" style="width: 100px;"></el-input>
                      <el-select v-model="formData1.TimeType" style="width: 100px;">
                        <el-option label="小时" value="hours"></el-option>
                        <el-option label="天" value="days"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="标题：" prop="txtFileName">
                      <el-input v-model="formData1.txtFileName" style="width: 220px;"></el-input>
                    </el-form-item>
                    <div style="display: inline-flex;margin-bottom: 20px;"><label style="width: 100px;text-align: center;">内容：</label>
                    <span style="margin-left: 10px;">(允许最大长度10000个字)</span></div>
                    <tinymce  ref="editor"  :tinymceObj="tinymceObj"  v-model="txtFileContent"
                    @tinymcevalue="getValue"></tinymce>
                  </div>
                </div>
                <div class="right">
                  <div class="public-title" style="text-indent: 20px;margin-left:5%;">可查看部门列表</div>
                  <div  style="margin-left:5%;">
                    <el-tree :data="deptList" :show-checkbox="true" node-key="id" ref="tree"
                    :default-expand-all="true" :props="defaultProps" @check-change="getCurrentKey"></el-tree>
                  </div>
                </div>
                <div class="footer" style="margin-top:20px;">
                    <el-button type="primary" @click="submitData('formData1',2)">确 定</el-button>
                    <el-button type="primary" @click="submitData('formData1',1)">应 用</el-button>
                    <el-button @click="cancelBtn">取 消</el-button>
                </div>
              </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
    </div>
    <!--el-dialog-->
    <el-dialog :title="titleName" :visible.sync="dialogVisible">
      <div v-html="content"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!--el-dialog-->
  </div>
</template>
<script>
import {notice} from '@/ajax';
import config from './Manage.js';
import common from '@/utils/common.js';
import tinymce from '@/components/Editor'
export default {
    data(){
        return {
          searchdata:{
            txtPublisher:'',txtFileName:''
          },
          totalnum: 0,
          currentPage: 0,
          pagerange: [2, 10, 20, 50, 100],
          pagesize: 10,
          tableData:[],
          isEdit:true,
          activeName:'first',
          dialogVisible:false,
          formData1:{txtPublisher:'',txtPublishDate:'',
                    txtExpiryHours:'',txtFileName:'',OrgDisplayName:'',TimeType:'hours'},
          txtFileContent:'',
          formRule1:{
            txtPublisher:{required:true,message:'请选择创建人',trigger:'blur'},
            txtFileName:{required:true,message:'请填写标题',trigger:'blur'},
          },
          selection:[],
          config:config,
          titleName:'',
          content:'',
          usedList:[{'id':'123','name':'lily'}],
          tinymceObj:{
              height:350,
              value:''
          },
          deptList:config.deptList,
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          nodeList:[],
          common:common,
        }
    },
    components:{
      tinymce
    },
    mounted(){
      if(this.isEdit){
        this.getCompanyNoticeList();
      }
    },
    inject:['reload'],
    methods:{
      //getCompanyNoticeList,addCompanyNotice,deleteCompanyNotice
      searchBtn(){
        this.getCompanyNoticeList();
      },
      //
      getValue(html){
        this.txtFileContent = html;
      },
      //
      handleSelectionChange(val){
        if(val){
          this.selection = [];
          for (let i in val) {
            this.selection.push(val[i]['InformID'])
          }
        }
      },
      getCompanyNoticeList(){
        this.searchdata['page'] = this.pagesize;
        this.searchdata['rows'] = this.currentPage;
        this.tableData = config.noticeList;
        this.totalnum = this.tableData.length;
        /* notice.getCompanyNoticeList(this.searchdata).then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.totalnum = this.tableData.length;
            }else{
              this.tableData = [];
              this.totalnum = 0;
            }
          } else {
            this.$message(res.data.message);
          }
          }).catch(()=>{
            this.$message('服务器正忙，获取公司动态列表失败');
          }) */
      },
      //分页
      handleSizeChange(val){
          this.pagesize = val;
          this.getCompanyNoticeList();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.getCompanyNoticeList();
      },
      addBtn(){
        this.formData1.txtPublishDate = common.getFormatterTime('yyyy-MM-dd HH:mm')
        this.isEdit = false;
      },
      cancelBtn(){
        this.isEdit = true;
        this.getCompanyNoticeList();
      },
      //获取所有部门
      getCurrentKey(val){
        this.nodeList = this.$refs.tree.getCheckedNodes();
      },
      //进行弹出
      getContent(row){
        this.dialogVisible = true
        this.titleName = '['+ row.FileName+']内容浏览'
        this.content = `${row.txtFileContent}`
      },
      deleteBtn(){
        if(this.selection.length <= 0){
          this.$message('请选择要操作的数据')
        }else{
          this.$confirm('您确定要删除所选择的记录吗？删除的数据将无法恢复？', '操作提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
             notice.deleteCompanyNotice(this.selection).then((res) => {
                if (res.data.code == '00000') {
                  this.reload()
                } else {
                  this.$message(res.data.message);
                }
              }).catch(()=>{
                this.$message('服务器正忙，删除失败');
              })
          }).catch();
        }
      },
      //
      submitData(form,type){
        this.$refs[form].validate((valid) => {
          console.log('valid',valid)
          if(valid){
            if(!this.txtFileContent){
              this.$message('请填写通知内容')
            }else if(this.nodeList.length <= 0){
              this.$message('请选择通知部门')
            }else{
              this.formData1['txtFileContent'] = this.txtFileContent
              this.formData1['OrgDisplayName']= this.nodeList
              //处理nodelist
              notice.addCompanyNotice(this.formData1).then((res) => {
                 if (res.data.code == '00000') {
                   if(type == 1){
                     //清空数据
                     this.$refs[form].resetFields();
                   }else{
                     this.reload()
                   }
                 } else {
                   this.$message(res.data.message);
                 }
               }).catch(()=>{
                 this.$message('服务器正忙，添加公司动态失败');
               })
            }
          }else{
            return false
          }
        })
      }
    },
    watch:{

    }
}
</script>
<style lang="scss">
.public-common{
    .public-title{line-height: 30px;background-color: #deecfd;}
    .inline-btn{display: inline-flex;margin: 20px;
      label{width:100px;line-height: 32px;margin-left:10px;text-align: right;}
      .el-input{width: 170px;}
      .el-button{margin-left:10px;}
    }
    .el-form-item .el-input{width: 180px;}
    .left{display: inline-block;;width:60%;float: left;}
    .right{display: inline-block;;width:38%;float: left;}
    .el-form .inline-btn{margin:unset;}
    .footer{
      width: 100%;
      display: inline-flex;
      margin-left: 72%;
    }
    .right-border{
      border-left: 1px solid #eeeeee;
      min-height: 500px;
      margin-left: 1%;
      height: auto;
    }
}
</style>
